<template>
  <el-tabs class="tree-tabs" v-model="tabActiveName" @tab-click="handleTabClick">
	<el-tab-pane label="采集系统树" name="sys">
	  <!-- <div style="text-align:center;padding:0px 6px 10px 6px;">
		  <el-select v-model="param.deviceType" placeholder="请选择类型" size="small" style="width:100%;" @change="yongnengType">
		    <el-option v-for="(item,index) in getDeviceTypes()" :key='index' :label="item.name" :value="item.id"></el-option>
		  </el-select>
	  </div> -->
	  <div class="tree-main">
	    <el-input
	      placeholder="输入关键字进行过滤"
	      v-model="sysTreeFilterText"
	      suffix-icon="el-icon-search" size="small">
	    </el-input>
	    <el-tree
	      class="filter-tree"
	      :data="sysTreeData"
	      :props="defaultProps"
	      default-expand-all
	      highlight-current
		  show-checkbox
		  node-key="id"
	      :expand-on-click-node="false"
	      :filter-node-method="filterNode"
	      @node-click="sysNodeClick"
		  @check-change="handleCheckChange3"
		  @check="handleCheckon"
	      ref="sysTree">
	    </el-tree>
	  </div>
	</el-tab-pane>
	
	<el-tab-pane label="厂房区域树" name="workshop">
	  <!-- <div style="text-align:center;padding:0px 6px 10px 6px;">
		  <el-select v-model="param.deviceType" placeholder="请选择类型" size="small" style="width:100%;" @change="yongnengType">
			<el-option v-for="(item,index) in getDeviceTypes()" :key='index' :label="item.name" :value="item.id"></el-option>
		  </el-select>
	  </div> -->
	  <div class="tree-main">
	    <el-input
	      placeholder="输入关键字进行过滤"
	      v-model="workshopTreeFilterText"
	      suffix-icon="el-icon-search" size="small">
	    </el-input>
	    <el-tree
	      class="filter-tree"
	      :data="workshopTreeData"
	      :props="defaultProps"
	      default-expand-all
	      highlight-current
		  show-checkbox
		  node-key="id"
	      :expand-on-click-node="false"
	      :filter-node-method="filterNode"
	      @node-click="workshopNodeClick"
		  @check-change="handleCheckChange1"
		  @check="handleCheckon"
	      ref="workshopTree">
	    </el-tree>
	  </div>
	</el-tab-pane>
	
	<el-tab-pane label="工艺分项树" name="workmanship">
	  <!-- <div style="text-align:center;padding:0px 6px 10px 6px;">
		  <el-select v-model="param.deviceType" placeholder="请选择类型" size="small" style="width:100%;" @change="yongnengType">
			<el-option v-for="(item,index) in getDeviceTypes()" :key='index' :label="item.name" :value="item.id"></el-option>
		  </el-select>
	  </div> -->
	  <div class="tree-main">
	    <el-input
	      placeholder="输入关键字进行过滤"
	      v-model="workmanshipTreeFilterText"
	      suffix-icon="el-icon-search" size="small">
	    </el-input>
	    <el-tree
	      class="filter-tree"
	      :data="workmanshipTreeData"
	      :props="defaultProps"
	      default-expand-all
	      highlight-current
		  show-checkbox
		  node-key="id"
	      :expand-on-click-node="false"
	      :filter-node-method="filterNode"
	      @node-click="workmanshipNodeClick"
		  @check-change="handleCheckChange2"
		  @check="handleCheckon"
	      ref="workmanshipTree">
	    </el-tree>
	  </div>
	</el-tab-pane>
	
    
    
    
  </el-tabs>
</template>

<script>

import { getTypeTree } from "@/api/sendhttp/typeTree";

export default {
  name: "TypeTree",
   data() {
    return {
      tabActiveName: 'sys',
      defaultProps: {
        children: 'childList',
        label: 'name'
      },
      sysTreeFilterText: '',
      sysTreeData: [],
      workshopTreeFilterText: '',
      workshopTreeData: [],
      workmanshipTreeFilterText: '',
      workmanshipTreeData: [],
	  leftmenuiddata1:[],
	  leftmenuiddata2:[],
	  leftmenuiddata3:[],
	  infoAllTreeData:[],
	  param:{deviceType:1},
	  xuanData:[],
    };
  },
  watch: {
    sysTreeFilterText(val) {
      this.$refs.sysTree.filter(val);
    },
    workshopTreeFilterText(val) {
      this.$refs.workshopTree.filter(val);
    },
    workmanshipTreeFilterText(val) {
      this.$refs.workmanshipTree.filter(val);
    }
  },
  created() {
    // 获取采集系统树
    this.getSysTreeData();
    // 获取厂房区域树
    this.getWorkshopTreeData();
    // 获取工艺分项树
    this.getWorkmanshipTreeData();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
	handleCheckon(data,checkdata){
		//console.log(data, checkdata);
		data.leftmenuiddata=checkdata.checkedKeys
		var deviceType=this.param.deviceType;
		this.$emit('node-click', 'sys', data,deviceType);
	},
	handleCheckChange1(data, checked, indeterminate) {
		if(checked){
		  if(data.id>0){
		  this.leftmenuiddata1.push(data.id);
		  }
		}else{
		  this.leftmenuiddata1.forEach(function(item, index, arr) {
		      if(item ==data.id) {
		          arr.splice(index, 1);
		      }
		  });
		}
		//console.log(this.leftmenuiddata1);
		//console.log(data, checked, indeterminate);
	},
	handleCheckChange2(data, checked, indeterminate) {
		if(checked){
			if(data.id>0){
			this.leftmenuiddata2.push(data.id);
			}
		}else{
		  this.leftmenuiddata2.forEach(function(item, index, arr) {
		      if(item ==data.id) {
		          arr.splice(index, 1);
		      }
		  });
		}
	},
	handleCheckChange3(data, checked, indeterminate) {
		if(checked){
		  if(data.id>0){
		  this.leftmenuiddata3.push(data.id);
		  }
		}else{
		  this.leftmenuiddata3.forEach(function(item, index, arr) {
		      if(item ==data.id) {
		          arr.splice(index, 1);
		      }
		  });
		}
	},
    // 切换树形维度tab
    handleTabClick(tab, event) {
      console.log(tab.name,tab, event);
    },
    
    workshopNodeClick(data,node,tree){
	  node.checked=!(node.checked)
	  data.leftmenuiddata=this.leftmenuiddata1
	  var deviceType=this.param.deviceType;
	  this.xuanData=data;
      this.$emit('node-click', 'workshop', data,deviceType);
    },
    workmanshipNodeClick(data,node,tree){
	  node.checked=!(node.checked)
	  data.leftmenuiddata=this.leftmenuiddata2
	  var deviceType=this.param.deviceType;
	  this.xuanData=data;
      this.$emit('node-click', 'workmanship', data,deviceType);
    },
	sysNodeClick(data,node,tree){
	  node.checked=!(node.checked)
	  data.leftmenuiddata=this.leftmenuiddata3
	  var deviceType=this.param.deviceType;
	  this.xuanData=data;
	  this.$emit('node-click', 'sys', data,deviceType);
	},
	yongnengType(e){
	  console.log(e);
	  var newArray=[];
	  var typeid=e-1;
	  newArray.push(this.infoAllTreeData[typeid]);
	  this.sysTreeData=newArray[0].childList;
	  this.$emit('node-click',this.tabActiveName,this.xuanData,e);
	  //this.$emit('get-node-click',e);
	},
    // 获取采集系统树
    getSysTreeData(){
      // 静态数据，待对接接口
      // this.sysTreeData = [{"id":1,"name":"广亚铝业","childList":[{"id":4,"name":"海南基地","childList":[{"id":9,"name":"电表"},{"id":10,"name":"水表"}]}]},{"id":2,"name":"广亚铝业2","childList":[{"id":5,"name":"电表"},{"id":6,"name":"水表"}]},{"id":3,"name":"广亚铝业2","childList":[{"id":7,"name":"电表"},{"id":8,"name":"气表"}]}];
      var allids={childList:null,id:"",name: "全部",pid: "0",type: "采集系统"};
      getTypeTree({"levelType":"采集系统"}).then(response => {
		//console.log("采集系统",response);
        if(response.status===200){
          if(response.data.code=='200'){
            this.sysTreeData = response.data.data;
			var resData=response.data.data;
			this.infoAllTreeData=resData;
			//var newArray=[];
			//var typeid=this.param.deviceType-1;
			//newArray.push(this.infoAllTreeData[typeid]);
			this.sysTreeData=this.infoAllTreeData;
			
			//this.sysTreeData.unshift(allids);
          }
        }
      });

    },
    // 获取厂房区域树
    getWorkshopTreeData(){
      // 静态数据，待对接接口
      // this.workshopTreeData = [{"id":1,"name":"包装车间"},{"id":2,"name":"喷砂机"},{"id":3,"name":"成品仓库"},{"id":4,"name":"深加工"},{"id":5,"name":"广航车间"},{"id":6,"name":"摸具加工中心"},{"id":7,"name":"喷涂F线"},{"id":8,"name":"喷涂E线"},{"id":9,"name":"喷涂D线"},{"id":10,"name":"喷涂BC线"},{"id":11,"name":"喷涂共用"},{"id":12,"name":"熔铸车间"}];
      var allids={childList:null,id:"",name: "全部",pid: "0",type: "厂房区域"};
      getTypeTree({"levelType":"厂房区域"}).then(response => {
		//console.log(response.data.data);
        if(response.status===200){
          if(response.data.code=='200'){
            this.workshopTreeData = response.data.data;
			//this.workshopTreeData.unshift(allids);
          }
        }
      });

    },
    // 获取工艺分项树
    getWorkmanshipTreeData(){
      // 静态数据，待对接接口
      // this.workmanshipTreeData = [{"id":1,"name":"包装","childList":[{"id":4,"name":"包装车间"}]},{"id":2,"name":"成品","childList":[{"id":5,"name":"成品仓库"}]},{"id":3,"name":"广航车间","childList":[{"id":7,"name":"成品仓库"}]},{"id":11,"name":"挤压","childList":[{"id":111,"name":"30#挤压机"},{"id":112,"name":"挤压一车间"},{"id":113,"name":"挤压二车间"},{"id":114,"name":"挤压三车间"}]},{"id":12,"name":"摸具","childList":[{"id":121,"name":"保膜和修模"},{"id":122,"name":"摸具淡化"},{"id":123,"name":"摸具加工中心"}]}];
      var allids={childList:null,id:"",name: "全部",pid: "0",type: "工艺分项"};
      getTypeTree({"levelType":"工艺分项"}).then(response => {
        if(response.status===200){
          if(response.data.code=='200'){
            this.workmanshipTreeData = response.data.data;
			//this.workmanshipTreeData.unshift(allids);
          }
        }
      });

    }
  }
}
</script>

<style>
.tree-tabs .el-tabs__item{
  padding: 0px 10px;
  height: 48px;
  line-height: 48px;
}
.tree-tabs .el-tabs__nav-scroll{
  text-align: center;
}
.tree-tabs .el-tabs__nav{
  float: unset;
}
.tree-tabs .el-tabs__active-bar{
  left: 24px;
}
.tree-tabs .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background-color: #409EFF00;
  color: #409EFF;
}
</style>
<style scoped>
.tree-main{
  padding: 0px 5px;
}
.filter-tree{
  margin-top:6px;
}
</style>
